<template>
	<div class="box">
		<div class="noticebar">批阅</div>
		<div class="testContent">
			<div class="testQuestionBox">
				<p class="testQuestion">{{textname}}</p>

				<div>
					<div class="question" v-for="(item, idx) in questions" :key="idx" v-show="radio==1">
                         
						<div style="display: flex;">{{ `${idx+1}.[${item.question.name}](${item.question.score})`}}
							<div v-html="`${md(item.question.content)}`"></div>
						</div>
						<div v-for="(Item,indx) in item.question.optionsList" :key="indx+'hh'" style="display: flex;">
							<div v-if="item.question.topicId==1">
								<el-radio v-model="item.question.answer" :label="Item.id" style="margin-top: 0.625rem;">
									<div style="display: flex;">{{letter[indx]}}:
										<div v-html="`${md(Item.content)}`"></div>
									</div>
								</el-radio>
							</div>
							<div v-if="item.question.topicId==2">
								<el-checkbox-group v-model="item.answerList">
									<el-checkbox :label="Item.id" :key="indx" style="margin-top: 1.25rem;">
										<div style="display: flex;">{{letter[indx]}}:
											<div v-html="`${md(Item.content)}`"></div>
										</div>
									</el-checkbox>
								</el-checkbox-group>
							</div>
						</div>
						<div v-if="item.question.topicId==3">

							<div v-for="(Item,indx) in exam" :key="indx+'hh'" style="display: flex;">
								<el-radio v-model="item.question.answer" :label="Item.id" style="margin-top: 0.625rem;">
									<div>{{letter[indx]}}:{{Item.value}}
									</div>
								</el-radio>
							</div>
						</div>
						<div v-if="item.question.topicId==4" style="height: 22.5rem;">
							<!-- <quill-editor v-model="item.question.answer" style="height:260px;background-color: white;margin-top: 1.25rem;"></quill-editor>
							 -->
							 <div v-html="item.question.answer"></div>
						</div>
						<div v-if="item.question.topicId==5" style="height: 22.5rem;">
							<quill-editor v-model="item.question.answer" style="height:260px;background-color: white;margin-top: 1.25rem;"></quill-editor>
						</div>
						<div class="testpd">
						  <div>
						    <span>学生答案：{{ item.userAnswer }} </span>
						    <span style="color: #63cc9c"
						      >正确答案:{{ item.question.answer }}</span
						    >
						  </div>
						  <div>
						    <span class="score">得分:</span>
						    <input
						      style="width: 30px; margin-left: -20px;padding: 0.2rem;"
						      type="text"
							  v-model="item.question.score"
							  disabled="disabled"
						    />分
						  </div>
						</div>
					</div>
					
					<div class="question" v-for="(item, idx) in questions" :key="idx+'hh'" v-show="(item.question.topicId==5&&radio==0)">
					     
						<div style="display: flex;">{{ `${idx+1}.[${item.question.name}](${item.question.score})`}}
							<div v-html="`${md(item.question.content)}`"></div>
						</div>
						<div v-if="item.question.topicId==5" style="height: 22.5rem;">
							<quill-editor v-model="item.question.answer" style="height:260px;background-color: white;margin-top: 1.25rem;"></quill-editor>
						</div>
						<div class="testpd">
						  <div>
						    <span>学生答案：{{ item.userAnswer }} </span>
						    <span style="color: #63cc9c"
						      >正确答案:{{ item.question.answer }}</span
						    >
						  </div>
						  <div>
						    <span class="score">得分:</span>
						    <input
						      style="width: 30px; margin-left: -20px;padding: 0.2rem;"
						      type="text"
							  v-model="item.question.score"
							  disabled="disabled"
						    />分
						  </div>
						</div>
					</div>
				<!-- 	<div class="bigbox" v-for="(oneq, idx) in allq" :key="idx">
            <div class="questionTitle">
              <div>
                {{ oneq.name }}<br />

                <p class="qtitle">DB的三级模式结构是对()进行抽象的三个级别:</p>
                <p
                  style="font-size: 13px"
                  class="qcontent"
                  v-for="(onepd, idx) in allpd"
                  :key="idx"
                >
                  {{ onepd.pdtext }}
                </p>
              </div>
              <div class="testpd">
                <div>
                  <span>学生答案：{{ oneq.studentpd }} </span>
                  <span style="color: #63cc9c"
                    >正确答案:{{ oneq.rightpd }}</span
                  >
                </div>
                <div>
                  <span class="score">得分:</span>
                  <input
                    style="width: 30px; margin-left: -20px"
                    type="text"
                  />分
                </div>
              </div>
            </div>
          </div> -->
				</div>
			</div>

			<div class="testProgressBox">
				<div class="information">
					<div>
						<img class="txImg" :src="infoImg" alt="这里是图片" />
					</div>
					<div class="userInfo">
						前端 <br />
						20211717
						<br />
						2000班20号
					</div>
				</div>
				<div class="testProgress">
					 <el-checkbox v-model="radio" class="checkOneBtn" checked>显示客观题</el-checkbox>
					<!-- <el-radio v-model="radio" label="1" class="checkOneBtn">显示客观题</el-radio> -->
					<div class="optionBtn">
						<div v-for="(q, idx) in questions" :key="idx" class="checkAllBtn" @click="getid(idx)" :class="{ active: changeColor == idx, blue: !active }">
							{{ idx + 1 }}
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import {
		TestManager
	} from "../../../request/test.js"
	import marked from "marked";
	export default {
		name: "CorrectingChild",
		data() {
			return {
				changeColor: 0,
				istrue: true,
				radio:"1",
				question: [],
				allq: [{
						index: 2,
						rightpd: "y",
						studentpd: "x",
						name: "第一题",
					},
					{
						index: 2,
						rightpd: "y",
						studentpd: "x",
						name: "第二题",
					},
					{
						index: 2,
						rightpd: "y",
						studentpd: "x",
						name: "第三题",
					},
					{
						index: 2,
						rightpd: "y",
						studentpd: "x",
						name: "第四题",
					},
					{
						index: 2,
						rightpd: "y",
						studentpd: "x",
						name: "第五题",
					},
					{
						index: 2,
						rightpd: "y",
						studentpd: "x",
						name: "第六题",
					},
					{
						index: 2,
						rightpd: "y",
						studentpd: "x",
						name: "第七题",
					},
					{
						index: 2,
						rightpd: "y",
						studentpd: "x",
						name: "第八题",
					},
				],
				allpd: [{
						pdtext: "A:学习六中全会精神这些表述要精读热",
					},
					{
						pdtext: "B: Vue2.0支持嵌套v-for吗? -中文- Vue Forum",
					},
					{
						pdtext: "C:yue基于代码生成器和BPM的低代码快速开发平台",
					},
				],
				infoImg: "",
				testRecordId: this.$route.query.testRecordId,
				question: [],
				textname: '',
				questions: [],
				// testid: this.$route.params.testid,
				letter: ["A", "B", "C", "D", "E", "F", "G", "H", "R", "J", "K", "L"],
				exam: [{
						value: "正确",
						id: 1
					},
					{
						value: "错误",
						id: 0
					}
				],
				active:''
			};
		},
		created() {
			this.getTestRecordById();
		},

		methods: {
			getid(idx) {
				this.changeColor = idx;
				// this.istrue = !this.istrue;
				console.log(document.getElementsByClassName("question"));
				document.getElementsByClassName("question")[idx].scrollIntoView();
			},
			//获取答题记录
			getTestRecordById() {
				var parmas = {
					id: this.testRecordId
				}
				TestManager.getTestRecordsInfo(this.qs.stringify(parmas)).then(e => {
					console.log(e);
					this.question = e.data.data;
					this.textname = this.question.testRecord.testPaperName;
					this.questions = e.data.data.questions.map(q => {
						return {
							...q,
							answerList: [],
						}
					})
					console.log(this.questions);
				})
			},
			md(content) {
				return marked(content);
			},
		},
	};
</script>

<style lang="scss" scoped>
	.box {
		background: #f2f4f7;
		min-height: 100vh;
	}

	.blue {
		background-color: #e6f0ff;
	}

	.active {
		background-color: #00DBCF;
		color: white;
		cursor: pointer;
		caret-color: transparent;
	}

	.bigbox+.bigbox {
		margin-top: 20px;
	}

	.qcontent {
		margin-top: 10px;
	}

	.qcontent+.qcontent {
		margin-top: 10px;
	}

	.qtitle {
		margin-top: 10px;
	}

	.noticebar {
		width: 100%;
		height: 40px;
		background-color: #00DBCF;
		text-align: center;
		line-height: 40px;
		color: white;
	}

	.testContent {
		width: 1200px;
		margin: 0 auto;
		display: flex;
		margin-top: 30px;
	}

	.testQuestionBox {
		background-color: white;
		flex: 1;
		padding-left: 30px;
	}

	.testQuestion {
		height: 50px;
		font-size: 1.5em;
		line-height: 50px;
	}

	.testProgressBox {
		margin-left: 20px;
		width: 30%;
		background-color: white;
	}

	.checkOneBtn {
		padding-left: 25px;
		padding-top: 25px;
	}

	.questionTitle {
		line-height: 30px;
	}

	.optionBtn {
		padding: 20px;
		display: flex;
		justify-content: flex-start;
		flex-wrap: wrap;
	}

	.checkAllBtn {
		width: 35px;
		height: 35px;
		line-height: 2.5rem;
		margin-bottom: 10px;
		margin-left: 10px;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 15px;
		
		// background-color: #e6f0ff;
	}

	.testpd {
		background-color: #f2f4f7;
		width: 100%;
		// height: 60px;
		min-height:60px ;
		line-height: 60px;
		padding-left: 10px;
		padding-right: 10px;
		display: flex;
		justify-content: space-between;
		border-radius: 10px;
	}

	.score {
		margin-right: 30px;
	}

	.information {
		width: 100%;
		height: 100px;
		display: flex;
		// justify-content: space-between;
		// text-align: center;
	}

	.txImg {
		width: 70px;
		height: 70px;
		border-radius: 50%;
		margin-left: 50px;
		margin-top: 20px;
	}

	.userInfo {
		margin-left: 20px;
		margin-top: 30px;
		width: 100%;
	}

	.question {
		flex: 5;
		display: flex;
		flex-direction: column;
		padding: 50px;
		border-bottom: 1px solid #dfdfdf;
	}

	.question .el-radio-group {
		display: flex;
		flex-direction: column;
	}

	.el-radio-group .el-radio {
		height: 40px;
		line-height: 40px;
	}

	.question li {
		list-style: none;
		display: block;
		height: 40px;
		margin-left: 1.875rem;
		display: flex;
		align-items: center;
	}

	.question span {
		display: inline-block;
		height: 20px;
		padding: 2px 5px;
		border-radius: 3px;
		border: 1px solid #fdf6ec;
	}

	.question .yes {
		background: #f0f9eb;
		color: #97d3bf;
	}

	.question .no {
		background-color: #fdf6ec;
		color: #e7ac95;
	}

	.el-radio {
		display: flex;
		margin-top: 1.875rem;
	}
</style>
